<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta name="format-detection" content="telephone=no">
    <script src="__GLOBAL__/jquery-1.8.3.min.js"></script>
    <script src="__GLOBAL__/common.js"></script>
    <script src="__GLOBAL__/swiper-3.4.0.jquery.min.js"></script>
    <!--<script src="global/iscroll.js"></script>-->
    <link rel="stylesheet" href="__GLOBAL__/reset.css"/>
    <link rel="stylesheet" href="__CSS__/live.css"/>
    <link rel="stylesheet" href="__GLOBAL__/swiper-3.4.0.min.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ::-webkit-input-placeholder { /* WebKit browsers */
            color:    #fff;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:    #fff;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color:    #fff;
        }
        :-ms-input-placeholder { /* Internet Explorer 10+ */
            color:    #fff;
        }
        .modal {
            position:fixed;
            /*position: relative;*/
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            height: 100vh;
            overflow: hidden;
            outline: 0;
            -webkit-overflow-scrolling: touch;
            background-color: rgb(0, 0, 0);
            filter: alpha(opacity=60);
            background-color: rgba(0, 0, 0, 0);
            z-index: 999;
        }
        video {
            /*object-position: 0px 0px;*/
            width: 100%;
            height: 100%;
            /*position: fixed;*/
            right:0;
            bottom: 0;
            max-width: 100%;
            max-height: 100%;
            /*width: auto;*/
            /*height: auto;*/
            z-index: -9999;
            /*灰色调*/
            /*-webkit-filter:grayscale(100%)*/
        }

        #videoBox {
            position: relative;
            height: 100vh;
            width: 100vw;
            /*display:none;*/
        }

        #playBtn {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            display: block;
            border: none;
            background: url("images/live/playBtn.png") center no-repeat;
            z-index: 9999;
            width: 100%;
            background-size: 100px;
        }

        #poster {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            z-index: 100;
        }
        .swiper-container{
            float: left;
            width:87%;
            margin-left: 0px;
        }
        .swiper-slide{
            width: .65rem !important;
            height: .65rem;
            /*border: solid 1px red;*/
            border-radius: 50%;
        }
        .swiper-slide img{
            width: 100%;
            height: 100%;
            float: left;
            border-radius: 50%;
        }
        .demo {
            height: 5rem !important;
            width: 1rem;
            position: absolute;
            bottom: 1rem;
            right: 0;
            /*border: solid 1px red;*/
        }
        .demo  img{
            width: .35rem;
            height: .35rem;
            position: absolute;
            /*bottom: 0.1rem;*/
            /*left: 50%;*/
            margin-left: -0.125rem;
        }
    </style>
</head>
<body>
<div id="videoBox">
    <input id="playBtn" type="button" value="">
    <img id="poster" src="__IMG__/live/livebg.jpg" alt="">
    <!--<video id="videoBox" controls preload="auto" poster="images/tempPoster.jpg" x5-video-player-type="h5" x5-video-player-fullscreen="true">-->
    <video id="videoLive" height="100%" width="100%" preload="auto" poster="__IMG__/live/livebg.jpg"  x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true">
        <!--<source src="http://221.208.196.19:8080/hls/stream1.m3u8" type="application/x-mpegURL">-->
        <source src="rtmp://10160.liveplay.myqcloud.com/live/10160_bb1497b608">
    </video>


</div>
<!--播放结束显示-->
<div class="endvideo" style="display: none">
    <div class="endvideo-content">
        <div class="photo">
            <img src="__IMG__/live/photo.png"/>
        </div>
        <p class="zb-name">
            哎呀呀呀
        </p>
        <div class="end-time-box">
            <p class="end-title">直播结束</p>
            <p class="end-time">直播时长:&nbsp;02:53:24</p>
        </div>
        <div class="end-time-data flex">
            <div class="flex1">
                <div class="data-num">
                    <p class="num">2525.0<span class="dw">元</span></p>
                    <p class="txt">总礼物收入</p>
                </div>
                <div class="data-num">
                    <p class="num">2525.0<span class="dw">元</span></p>
                    <p class="txt">销售金额</p>
                </div>
            </div>
            <div class="flex1">
                <div class="data-num">
                    <p class="num">2525555<span class="dw">人</span></p>
                    <p class="txt">总观看人数</p>
                </div>
                <div class="data-num">
                    <p class="num">2525555<span class="dw">件</span></p>
                    <p class="txt">销售数量</p>
                </div>
            </div>
        </div>
        <div class="sure-btn">确定</div>
        <div class="share-box flex">
            <div class="fg flex1"></div><div>将成就分享到</div><div class="fg flex1"></div>
        </div>
    </div>
</div>

<div class="modal" style="display: block;">
    <div class="modal-top flex">
        <div class="modal-top-left flex1">
            <div class="zb-bg">
                <div class="photo" id="look-msg">
                    <img src="__IMG__/live/photo.png"/>
                </div>
                <div class="zb-msg">
                    <p class="zb-name">主播名字主播名字</p>
                    <p class="look-num">15.44万观看</p>
                </div>
                <div class="follow-btn">关注</div>
            </div>
        </div>
        <div class="modal-top-right">
            <!--<div class="a">-->
                <div class="swiper-container swiper-container1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="__IMG__/live/photo.png"/>
                        </div>
                        <div class="swiper-slide">
                            <img src="__IMG__/live/photo.png"/>
                        </div>
                        <div class="swiper-slide">
                            <img src="__IMG__/live/photo.png"/>
                        </div>
                        <div class="swiper-slide">
                            <img src="__IMG__/live/photo.png"/>
                        </div>
                        <div class="swiper-slide">
                            <img src="__IMG__/live/photo.png"/>
                        </div>
                        <div class="swiper-slide">
                            <img src="__IMG__/live/photo.png"/>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <!--<div class="swiper-pagination"></div>-->
                </div>
            <!--</div>-->

        </div>
    </div>
   <div class="data">
       <div class="thumb-up">
           <i class="thumb-up-icon"></i><span>18.4万</span>
       </div>
       <div class="follow">
           <i class="follow-icon"></i><span>1542</span>
       </div>
   </div>
   <div class="msg-box">
       <div class="store-name">
           美妆店店名
       </div>
       <div class="live-id">
           直播号:1564891
       </div>
       <div class="live-date">
           2017-07-20
       </div>
   </div>
    <div class="demo"></div>
    <div class="bottom-box">
        <div class="bottom-box-left">
        <div class="chat-box  swiper-container swiper-container3">
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper-slide-active" id="msg-box">
                    <div class="line">
                        <div class="use-msg">
                            <div class="level one">Lv1</div>
                            <div class="use-name">小宇宙的小二：</div>
                            <div class="use-txt">厉害了我的大大厉害了我的大大厉害了我的大大</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="use-msg">
                            <div class="level one">Lv1</div>
                            <div class="use-name">小宇宙的小二：</div>
                            <div class="use-txt">厉害了我的大大厉害了我的大大厉害了我的大大</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="use-msg">
                            <div class="level one">Lv1</div>
                            <div class="use-name">小宇宙的小二：</div>
                            <div class="use-txt">厉害了我的大大厉害了我的大大厉害了我的大大</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="use-msg">
                            <div class="level one">Lv1</div>
                            <div class="use-name">小宇宙的小二：</div>
                            <div class="use-txt">厉害了我的大大厉害了我的大大厉害了我的大大</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="use-msg">
                            <div class="level one">Lv1</div>
                            <div class="use-name">小宇宙的小二：</div>
                            <div class="use-txt">厉害了我的大大厉害了我的大大厉害了我的大大</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="use-msg">
                            <div class="level one">Lv1</div>
                            <div class="use-name">小宇宙的小二：</div>
                            <div class="use-txt">厉害了我的大大厉害了我的大大厉害了我的大大</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="msg-inp">
            <div class="send">

            </div>
            <input type="text" id="input" class="send-box" placeholder="说点什么...">
        </div>
        </div>
        <div class="bottom-box-right">

            <div class="zan-box" id="btn1">
                <img src="__IMG__/live/up-icon.png"/>
            </div>
            <div class="share-box">
                <img src="__IMG__/live/share-icon.png"/>
            </div>
            <div class="gift-box">
                <img src="__IMG__/live/gift-icon.png"/>
            </div>
            <div class="goods-box">
                <img src="__IMG__/live/shop-icon.png">
            </div>
        </div>
    </div>
    <!--关闭按钮-->
    <div class="close-peopel">

    </div>
    <!--遮罩背景-->
    <div class="alert-bg"></div>
    <!--主播信息-->
    <div class="alert-live-box" style="display: none">
        <div class="alert-live-msg">
            <div class="live-photo">
                <img src="__IMG__/live/photo.png"/>
            </div>
            <p class="seller-name">商家名称</p>
            <p class="live-id">直播号:11749982</p>
            <div class="live-msg flex">
                <div class="flex1">
                    <p class="name">
                        <span class="l-title">姓名:</span>
                        李三思
                    </p>
                    <p class="tel">
                        <span class="l-title">电话:</span>
                        18773259465
                    </p>
                    <p class="address">
                        <span class="l-title">地址:</span>
                        湖南省长沙市岳麓区潇湘中路58号
                    </p>
                </div>
                <div class="erweima">
                    <img src="images/live/erweima.png"/>
                </div>
            </div>
            <div class="data-box flex">
                <div class="flex1">
                    <p class="num">90455</p>
                    <p class="data-title">关注</p>
                </div>
                <div class="flex1">
                    <p class="num">90455</p>
                    <p class="data-title">粉丝</p>
                </div>
                <div class="flex1">
                    <p class="num">90455</p>
                    <p class="data-title">销售</p>
                </div>
                <div class="flex1">
                    <p class="num">90455</p>
                    <p class="data-title">直播</p>
                </div>
            </div>
            <div class="alert-btn-group flex">
                <div class="sure-btn flex1">关注</div>
                <div class="goods-list flex1">产品列表</div>
            </div>
        </div>
    </div>
    <!--商品抢购-->
    <div class="goods-img-box" style="visibility: hidden">
        <div class="swiper-container2 swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="img-box">
                        <img src="__IMG__/live/goods1.png">
                    </div>
                    <p class="goods-name">dior迪奥烈焰蓝金唇膏</p>
                    <p class="goods-price">￥260.00</p>
                    <p class="goods-old-price"><del>￥300.00</del></p>
                    <div class="shop-btn">抢购</div>
                </div>
                <div class="swiper-slide">
                    <div class="img-box">
                        <img src="__IMG__/live/goods2.png">
                    </div>
                    <p class="goods-name">dior迪奥烈焰蓝金唇膏</p>
                    <p class="goods-price">￥260.00</p>
                    <p class="goods-old-price"><del>￥300.00</del></p>
                    <div class="shop-btn">抢购</div>
                </div>
                <div class="swiper-slide">
                    <div class="img-box">
                        <img src="__IMG__/live/goods3.png">
                    </div>
                    <p class="goods-name">dior迪奥烈焰蓝金唇膏</p>
                    <p class="goods-price">￥260.00</p>
                    <p class="goods-old-price"><del>￥300.00</del></p>
                    <div class="shop-btn">抢购</div>
                </div>
                <div class="swiper-slide">
                    <div class="img-box">
                        <img src="__IMG__/live/goods1.png">
                    </div>
                    <p class="goods-name">dior迪奥烈焰蓝金唇膏</p>
                    <p class="goods-price">￥260.00</p>
                    <p class="goods-old-price"><del>￥300.00</del></p>
                    <div class="shop-btn">抢购</div>
                </div>
                <div class="swiper-slide">
                    <div class="img-box">
                        <img src="__IMG__/live/goods1.png">
                    </div>
                    <p class="goods-name">dior迪奥烈焰蓝金唇膏</p>
                    <p class="goods-price">￥260.00</p>
                    <p class="goods-old-price"><del>￥300.00</del></p>
                    <div class="shop-btn">抢购</div>
                </div>
                <div class="swiper-slide">
                    <div class="img-box">
                        <img src="__IMG__/live/goods1.png">
                    </div>
                    <p class="goods-name">dior迪奥烈焰蓝金唇膏</p>
                    <p class="goods-price">￥260.00</p>
                    <p class="goods-old-price"><del>￥300.00</del></p>
                    <div class="shop-btn">抢购</div>
                </div>
            </div>

        </div>
    </div>
</div>

<script>




    var iWindowWidth;
    var iWindowHeight;
    window.onresize = function () {
        autoWH();
        myPlayer.style.width = iWindowWidth + "px";
        myPlayer.style.height = iWindowHeight + "px";
    }
    //获取videojs生成的video
    var myPlayer = document.getElementById("videoLive");
    //播放按钮
    var oPlayBtn = document.getElementById("playBtn");
    //获取视频盒子
    var oVideoBox = document.getElementById("videoBox");
    //获取滚动盒子
    //  var oScrollBox = document.getElementById("scrollBox");
    //遮罩图片
    var oPoster = document.getElementById("poster");
    var oScroll = document.getElementById("scroll");
    //图片加载完
    oPoster.onload = function () {
        oVideoBox.style.height = oPoster.offsetHeight + "px";
    }
    //  var fScroll=new iScroll(oScrollBox, {hScrollbar: false, vScrollbar: false,bounce:false});
    window.addEventListener('touchmove', function (e) {
        e.preventDefault();
    }, false);
    function autoWH() {
        //获取可视区宽度
        iWindowWidth = window.innerWidth;
        //获取可视区高度
        iWindowHeight = window.innerHeight;
        var iScrollH = 3 * iWindowWidth / 4;
//      oScrollBox.style.top = iScrollH + "px";
//      oScrollBox.style.height = iWindowHeight - iScrollH + "px";
//      fScroll.refresh();
    }
    autoWH();

    //播放按钮呗点击
    oPlayBtn.onclick = function () {
        myPlayer.play();
        this.style.display = oPoster.style.display = "none";
    }

    //监听播放
    myPlayer.addEventListener('play', function () {
//        alert("播放");

    }, false);
    //监听暂停
    myPlayer.addEventListener('pause', function () {
//        alert("暂停");
    }, false);
    //监听结束
    myPlayer.addEventListener('ended', function () {
//        alert("结束");
        $(".endvideo").show();
    }, false);


    var swiper1 = new Swiper('.swiper-container1', {
        pagination: '.swiper-pagination',
        slidesPerView: 4,
        paginationClickable: true,
        spaceBetween: 2,
        freeMode: true
    });



    /*聊天内容查看*/
    var swiper3 = new Swiper('.swiper-container3', {
//        scrollbar: '.swiper-scrollbar',
        direction: 'vertical',
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true,
        roundLengths : true, //防止文字模糊
    });

    $(function () {

        /*发送评论*/
        $('.send').click(function(){
            alert(1);
            var val =$('#input').val();
            $('#msg-box').append(
                    '<div class="line">'+
                    ' <div class="use-msg">'+
                    '<div class="level one">Lv1</div>'+
                    '<div class="use-name">小宇宙的小二：</div>'+
                    '<div class="use-txt">'+ val +'</div>'+
                    ' </div>'+
                    ' </div>'
            )
            $("#input").attr("value","");
            $(".chat-box").scrollTop($(".chat-box")[0].scrollHeight);


        })

        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if(isAndroid){
            $("#input").focus(function(){
                console.log(1);
                $(".bottom-box").css("position","relative");
            })

            $("#input").blur(function(){
                $(".bottom-box").css("position","fixed");
            })
        }
//        alert('是否是Android：'+isAndroid);
//         alert('是否是iOS：'+isiOS);
//        $('.send-btn').click(function () {
//            var count = 5;
//            var countdown = setInterval(CountDown, 1000);
//            function CountDown() {
//                $(".send-btn").attr("disabled", true);
//                $(".send-btn").val("(" + count + ")");
//                if (count == 1) {
//                    $(".send-btn").val("发送").removeAttr("disabled");
//                    clearInterval(countdown);
//                }
//                count--;
//            }
//        })



            /*点赞效果*/
            $("#btn1").click(function(){
                var x = 100;
                var y = 900;
                var num = Math.floor(Math.random() * 7 + 1);
                var index=$('.demo').children('img').length;
                var rand = parseInt(Math.random() * (x - y + 1) + y);
                var imgEle = $("<img class='png' src='images/"+num+".png'>")
                $(".demo").append(imgEle);
                imgEle.animate({
                    bottom:"800px",
                    opacity:"0",
                    right: rand,
                },3000,function(){
                    imgEle.remove();
                })

            })

            /*点击头像查看信息*/
            $("#look-msg").click(function () {
                $(".alert-live-box,.alert-bg").show();
            })
            /*点击关闭*/
            $(".alert-bg").click(function () {
                $(".alert-live-box,.alert-bg").hide();
            })



    });


    var swiper2 = new Swiper('.swiper-container2', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 8,
        freeMode: true
    });

    /*商品显示隐藏*/
    $(".goods-box").click(function () {
        $(".alert-bg").show();
        $(".goods-img-box").css("visibility","visible");
    })
    $(".alert-bg").on('click',function(e){
        $(this).hide();
        $(".goods-img-box").css("visibility","hidden");
    })

</script>
</body>
</html>